<!--  -->
<template>
  <div id="app">
    <div id="myChart" :style="{ width: '100%', height: '380px' }"></div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  name: "app",

  components: {},
  data() {
    //这里存放数据
    return {
     
      resdata: [],
      personalnum: "",
      data: {onepercent: ""  ,twopercent: "" ,threepercent: "" ,fourpercent: "" , sixpercent: "" ,},

//  onepercent: "" ,twopercent: "",threepercent: "",fourpercent: "" ,sixpercent: "",
      //这个option就是在echarts官网demo中的option，这个对象中存放图标的各参数配置
      option: {
        title: {
          text: "富贵公司人员年龄分布",
          textAlign: "center",
          left: "50%",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {value: this.threepercent, name: '搜索引擎'},
              {value: this.sixpercent, name: '直接访问'},
              {value: 580, name: '邮件营销'},
              {value: 484, name: '联盟广告'},
              {value: 300, name: '视频广告'}
            ],
           
          },
        ],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},

  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.setOption(this.option);
    },
    loadData() {
      this.$http
        .get("http://rap2api.taobao.org/app/mock/276482/getPersonneInfo")
        .then((res) => {
          console.log(res);
          //  总人数
          this.resdata = res.data;
          // console.log(this.resdata);
          let personalnum = this.resdata.length;
          this.personalnum = personalnum;
          let age = [];
          for (let key of this.resdata) {
            age.push(key.age);
          }
          // console.log(age);

          let one = [];
          let two = [];
          let three = [];
          let four = [];
          let six = [];

          for (let i = 0; i < age.length; i++) {
            if (age[i] < 25) {
              one.push(age[i]);
            } else if (age[i] >= 25 && age[i] < 30) {
              two.push(age[i]);
            } else if (age[i] >= 30 && age[i] < 35) {
              three.push(age[i]);
            } else if (age[i] >= 35 && age[i] < 40) {
              four.push(age[i]);
            } else if (age[i] >= 40) {
              six.push(age[i]);
            }
          }

          let onepercent = parseFloat((one.length / personalnum) * 100);
            this.data.onepercent = onepercent;
          let twopercent = parseFloat((two.length / personalnum) * 100);
          this.data.twopercent = twopercent;
          let threepercent = parseFloat((three.length / personalnum) * 100);
          this.data.threepercent = threepercent;
          let fourpercent = parseFloat((four.length / personalnum) * 100);
          this.data.fourpercent = fourpercent;
          let sixpercent = parseFloat((six.length / personalnum) * 100);
          this.data.sixpercent = sixpercent;
          console.log(
            onepercent,
            twopercent,
            threepercent,
            fourpercent,
            sixpercent
          );
   
          
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.draw();
    this.loadData();
    // console.log( this.option);
    // console.log( this.option.series[0].data);
    var optionlist= this.option.series[0].data
    console.log( optionlist);
          //  this.option.series[0].data.push({ value: this.threepercent });
          //    this.draw();
    // console.log( this.threepercent);
    //  console.log( this.option.series[0].data[0]);
    // this.option.series[0].data.push({ value: this.threepercent });
          for(let key of optionlist){

            console.log(key.value);
            let value=key.value
            // value.splice(0,1,this.data.threepercent)
          value.push({love:'1111'})
    // this.option.series.data.push({value:this.threepercent})
    // console.log(this.resdata.data[key].name);
              }

    // for(let key in this.resdata){
    //    console.log(key)
    // }
    // console.log(111);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  lang='less' scoped>
</style>